<template>
    <div class='input-send'>
        <my-input :id="id" isCode="Y" disabled="true"  class='myInputs' :data="data" :isRequired="required"  :appid="appid"></my-input>
        <el-button type="primary" class="butttonSelect" @click="sendCode" :disabled="disabled">{{text}}</el-button>
    </div>
</template>
<script>
import myInput  from './myInput.vue'
export default {
    props:['exkey','extype','id','label','data','appid','dataField','isRequired'],
    components: {
        myInput
    },
    data(){
        return{
            disabled:false,
            text:"发送验证码",
            index:60
        }
    },
    methods:{
        sendCode(){
            if(!this.data.tel){
                this.$message.error('请输入手机号');
                return;
            }
            let sef=this;
            let timeIn=window.setInterval(function(){
                sef.text=sef.index+"秒后重新发送";
                sef.index--;
                sef.disabled=true;
                if(sef.index<0){
                    sef.disabled=false;
                    window.clearInterval(timeIn);
                }
            },1000)
            this.$post("business","api/sendCode",{"tel":this.data.tel}).then(data=>{
                   this.$message({
                    message: '发送成功！',
                    type: 'success'
                    });
            })
        }
    }
}
</script>

<style scoped>
    .input-send{
        display:flex;
        flex-direction: row;
    }
    .butttonSelect{
        width:100px;
        margin-left:5px;
    }
    .myInputs{
        flex:1;
    }
</style>